{% stylesheet %}
@charset "UTF-8";
.block_collection_slides .block_collection_product {
  position: relative;
}

.block_collection_slides .block_collection_product_content {
  position: relative;
  overflow: hidden;
}

.block_collection_slides .block_collection_product li {
  list-style-type: none;
  line-height: 1.4;
  text-align: center;
}

.block_collection_slides .block_collection_product .product_pic {
  margin-bottom: 18px;
  position: relative;
}

.block_collection_slides .block_collection_product .soldout {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 30px;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  line-height: 50px;
  background: rgba(0, 0, 0, 0.3);
  color: #fff;
  font-size: 14px;
}

.block_collection_slides .block_collection_product .product_pic .product_img {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  width: 100%;
}

.block_collection_slides .block_collection_product .product_pic img {
  max-width: 100%;
}

.block_collection_slides .block_collection_product .block_product_name {
  margin-bottom: 4px;
  line-height: 1.5;
}

.block_collection_slides .block_collection_product .block_product_name a {
  color: var(--title_color);
}

.block_collection_slides .block_collection_product .product_price {
  font-weight: bold;
}

.block_collection_slides .block_collection_product .product_oldprice {
  color: #888;
  text-decoration: line-through;
  margin-left: 5px;
  display: inline-block;
  font-weight: normal;
}

.block_collection_slides .block_collection_product_more {
  margin-top: calc(var(--general_layout_spacing) * 0.5);
  text-align: center;
}

.block_collection_slides .block_collection_product_more a {
  margin: 0;
}

.block_collection_slides .block_collection_product .prev,
.block_collection_slides .block_collection_product .next {
  position: absolute;
  top: 50%;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  z-index: 9;
  background: #fff;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: -30px;
  cursor: pointer;
  opacity: 0;
  transition: all 0.3s;
}

.block_collection_slides .block_collection_product:hover .prev,
.block_collection_slides .block_collection_product:hover .next {
  opacity: 1;
}

.block_collection_slides .block_collection_product .prev {
  left: 20px;
}

/* 按钮禁用状态 */
.block_collection_slides .block_collection_product .swiper-button-disabled {
  cursor: not-allowed;
}

.block_collection_slides .block_collection_product .swiper-button-disabled svg {
  fill: #ccc;
}

.block_collection_slides .block_collection_product .next {
  right: 20px;
}

.block_collection_slides .block_collection_product .pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 30px;
  overflow: hidden;
}

.block_collection_slides .block_collection_product .pagination span {
  display: block;
  width: 10px;
  height: 10px;
  border: 2px solid #1d1f21;
  border-radius: 50%;
  background: none;
  margin: 0 3px;
  opacity: 1;
  box-sizing: border-box;
  flex-shrink: 0;
}

.block_collection_slides .block_collection_product .pagination span.swiper-pagination-bullet-active {
  background: #1d1f21;
}

.block_collection_slides .block_collection_product .product_name {
  margin-bottom: 10px;
  line-height: 1.5;
  font-size: var(--product_font_size);
}

.block_collection_slides .block_collection_product .product_name a {
  color: var(--title_color);
}

@media (max-width: 768px) {
  .block_collection_slides .block_collection_product .prev,
  .block_collection_slides .block_collection_product .next {
    display: none;
  }
}

@media screen and (max-width: 767px) {
  .block_collection_slides .label_style_1 {
    transform: scale(0.8);
    right: -8px;
    top: -8px;
  }
}

{% endstylesheet %}
{% if section.settings.collection.id %}
{% get_collection collections_id={section.settings.collection.id} %}
{% assign collection = collection  %}
{% endif %}

<div class="block_collection_slides">
  <div class="{% if section.settings.is_fill %}full_container_wrapper{% else %}container_wrapper{% endif %}">
      {% if section.settings.title != '' or section.settings.detail != '' %}
      <div class="block_title">
          {% if section.settings.title != '' %}<h2>{{ section.settings.title }}</h2>{% endif %}
          {% if section.settings.detail != '' %}<div class="block_detail">{{ section.settings.detail }}</div>{% endif %}
      </div>
      {% endif %}
      <div class="block_collection_product">
          <div class="block_collection_product_content" id="block_collection_{{ block_id | default : section.block_id  }}">
              <ul class="swiper-wrapper">
                  {% if section.settings.collection.id %}
                  {% get_products collection_id = {section.settings.collection.id} limit = { section.settings.product_number } %}
                  {% for product in products %}
                  <li class="swiper-slide">
                  {% include 'collection_product' , collection_handle:collection.handle %}
                  </li>
                  {% endfor %}
                  {% else %}
                  {% for i in (1..4) %}
                   <li class="swiper-slide">
                      <div class="product_pic">
                          <a href="javascript:;"><img src="{{ 'empty.png' | public_asset_abs_url }}"></a>
                          {% if product.inventory_tracking %}
                          {% if product.inventory_quantity == "0" %}
                          <div class="soldout">{{ lang.general.sold_out }}</div>
                          {% endif %}
                          {% endif %}
                          <div class="discount_tag {{ theme_config.global.discount_label_style }}"><div class="discount_tag_graphics"></div><div class="discount_tag_name">88% <span>OFF</span></div></div>
                      </div>
                      <div class="product_name">
                          <a href="javascript:;">title</a>
                      </div>
                      <div class="product_price general_buying-color">$88.00<span class="product_oldprice general_original-color">$88.00</span></div>
                  </li>
                  {% endfor %}
                  {% endif %}
              </ul>
          </div>
          <div class="prev" id="prev_{{ block_id | default : section.block_id  }}">{% include 'icon_silde_left' ,{width:'24',height:'24'} %}</div>
          <div class="next" id="next_{{ block_id | default : section.block_id  }}">{% include "icon_silde_right" ,{width:'24',height:'24'} %}</div>
      </div>
      {% if section.settings.more_text != ""%}
      <div class="block_collection_product_more"><a class="secondary_btn" href="/collections/{{ collection.handle }}">{{ section.settings.more_text }}</a></div>
      {% endif %}
  </div>
</div>
<script type="text/javascript">
(function(){var sildes_{{ block_id | default : section.block_id  }} = new Swiper('#block_collection_{{ block_id | default : section.block_id  }}',{
  slidesPerView : {{ section.settings.pc_number }},
  spaceBetween : 30,
  navigation: {
      nextEl: '#next_{{ block_id | default : section.block_id  }}',
      prevEl: '#prev_{{ block_id | default : section.block_id  }}',
  },
  breakpoints: {
        640: {
            slidesPerView: 2.5,
            spaceBetween: 14
        },
        768: {
            slidesPerView: 3,
            spaceBetween: 30
        }
    }
})})()
</script>
{% schema %}
{
	"tag": "",
	"class": "block_collection_slides",
	"is_global": false,
	"icon": "icon-shangpinlunbo",
	"name": {
		"zh_CN": "商品轮播"
	},
	"max_blocks": "20",
	"settings": [
		{
			"type": "card_header",
			"label": {
				"zh_CN": "设置"
			}
		},
		{
			"type": "card_collection",
			"label": {
				"zh_CN": "专辑"
			},
			"default": {
				"id": "",
				"title": ""
			},
			"id": "collection"
		},
		{
			"type": "card_input",
			"label": {
				"zh_CN": "标题"
			},
			"id": "title",
			"default": "New Arrivals"
		},
		{
			"type": "card_text_editor",
			"label": {
				"zh_CN": "简短描述"
			},
			"id": "detail",
			"default": "bottom_center"
		},
		{
			"type": "card_switch",
			"label": {
				"zh_CN": "宽度铺满"
			},
			"id": "is_fill"
		},
		{
			"type": "card_input",
			"label": {
				"zh_CN": "产品总数量"
			},
			"id": "product_number",
			"default": "8"
		},
		{
			"type": "card_slider",
			"label": {
				"zh_CN": "PC每排数量"
			},
			"id": "pc_number",
			"max": "5",
			"min": "3",
			"default": "3"
		},
		{
			"type": "card_input",
			"label": {
				"zh_CN": "查看更多文案"
			},
			"id": "more_text"
		}
	],
	"blocks": [],
	"default": {
		"settings": {
			"collection": {
				"id": "",
				"title": ""
			},
			"title": "Collection Slides",
			"detail": "",
			"is_fill": false,
			"product_number": "8",
			"pc_number": "3",
			"more_text": "View More"
		},
		"blocks": []
	}
}
{% endschema %}